import { Col,Row } from 'antd';
import className from 'classnames';
import classNames from 'classnames';
import { FC } from 'react';

import { iconsMap } from '@/config/icons-map';

interface IconsMapProps extends HTMLElementProps {
  value?: string;
  onChange?: (value: string) => void;
}

export const IconsMap: FC<IconsMapProps> = memo((props) => {
  return (
    <Row className={classNames(['icons-map', props.className])}>
      {iconsMap.map((name) => {
        return (
          <Col span={2} key={name}>
            <div
              onClick={() => {
                props.onChange?.(name);
              }}
              className={className([
                'text-20 flex justify-center rounded-4 py-2 m-2 cursor-pointer hover:bg-primary-200 transition-all',
                name,
                'iconfont',
                props.value === name ? '!bg-primary-400 text-white' : ''
              ])}></div>
          </Col>
        );
      })}
    </Row>
  );
});
